<template>
  <div class="main-detail">
    <div class="top-title">
      <div class="title">报表详情</div>
      <div
        class="download-btn"
        :class="tableDetailData.length == 0 ? 'download-btn-disable' : ''"
        @click="handleDownLoadFile"
      >
        <div class="btn-img">
          <img src="@/assets/images/detail/downloadBtn.png" alt="" />
        </div>
        <div>下载模版</div>
      </div>
    </div>
    <div v-show="tableDetailData.length > 0" class="detail-table">
      <div class="detail-table-box">
        <el-table
          :data="tableDetailData"
          style="width: 100%"
          height="66vh"
          @row-click="handleDetailItem"
        >
          <el-table-column prop="monitoringSection" label="监测断面" />
          <el-table-column
            prop="averageTrafficYesterday"
            label="昨日平均流量（m³/s）"
            width="200px"
          >
            <template #default="scope">
              <span v-if="isEditPropertyShow == scope.row.monitoringSection">
                <el-input
                  v-model="scope.row.averageTrafficYesterday"
                  placeholder="请输入昨日平均流量"
                />
              </span>
              <span v-else>{{ scope.row.averageTrafficYesterday }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="waterAmountYesterday" label="昨日水量（万m³）">
            <template #default="scope">
              <span v-if="isEditPropertyShow == scope.row.monitoringSection">
                <el-input
                  v-model="scope.row.waterAmountYesterday"
                  placeholder="请输入昨日水量"
                />
              </span>
              <span v-else>{{ scope.row.waterAmountYesterday }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="cumulativeWater" label="累计水量（万m³）">
            <template #default="scope">
              <span v-if="isEditPropertyShow == scope.row.monitoringSection">
                <el-input
                  v-model="scope.row.cumulativeWater"
                  placeholder="请输入累计水量"
                />
              </span>
              <span v-else>{{ scope.row.cumulativeWater }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="warehouse" label="库水位（m）">
            <template #default="scope">
              <span v-if="isEditPropertyShow == scope.row.monitoringSection">
                <el-input
                  v-model="scope.row.warehouse"
                  placeholder="请输入库水位"
                />
              </span>
              <span v-else>{{ scope.row.warehouse }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="waterStorage" label="蓄水量（万m³）">
            <template #default="scope">
              <span v-if="isEditPropertyShow == scope.row.monitoringSection">
                <el-input
                  v-model="scope.row.waterStorage"
                  placeholder="请输入蓄水量"
                />
              </span>
              <span v-else>{{ scope.row.waterStorage }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="totalStorageCapacity" label="总库容（万m³）">
            <template #default="scope">
              <span v-if="isEditPropertyShow == scope.row.monitoringSection">
                <el-input
                  v-model="scope.row.totalStorageCapacity"
                  placeholder="请输入总库容"
                />
              </span>
              <span v-else>{{ scope.row.totalStorageCapacity }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="eightHourTraffic" label="8时流量">
            <template #default="scope">
              <span v-if="isEditPropertyShow == scope.row.monitoringSection">
                <el-input
                  v-model="scope.row.eightHourTraffic"
                  placeholder="请输入8时流量"
                />
              </span>
              <span v-else>{{ scope.row.eightHourTraffic }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="eightHourFlowRate" label="8时流速">
            <template #default="scope">
              <span v-if="isEditPropertyShow == scope.row.monitoringSection">
                <el-input
                  v-model="scope.row.eightHourFlowRate"
                  placeholder="请输入8时流速"
                />
              </span>
              <span v-else>{{ scope.row.eightHourFlowRate }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-show="isShowBottomBtn" class="handle-btn-class">
        <div class="quit-btn" @click="handleQuitBtn">
          <div class="btn-img">
            <img src="@/assets/images/detail/quitBtn.png" alt="" />
          </div>
          <div>取消</div>
        </div>
        <div class="save-btn" @click="handleSaveBtn">
          <div class="btn-img">
            <img src="@/assets/images/detail/saveBtn.png" alt="" />
          </div>
          <div>保存</div>
        </div>
      </div>
    </div>
    <div v-show="tableDetailData.length == 0" class="detail-table-no-data">
      <img src="@/assets/images/detail/noData.png" alt="" />
      <span>暂无数据～</span>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
// import { downloadTemplate } from '@/api/index'

const props = defineProps({
  tableDetailData: {
    type: Array,
    default: () => [],
  },
})
// 判断是否为input框
const isEditPropertyShow = ref('')
// 是否展示底部 取消 保存 按钮 开关
const isShowBottomBtn = ref(false)

// // 暂无数据开关
// const isHaveData = ref(false);

// 详情列表 点击每行数据方法
const handleDetailItem = (row, column, event) => {
  console.log('选择了该条数据', row, column, event)
  isEditPropertyShow.value = row.monitoringSection
  isShowBottomBtn.value = true
}
//下载模版按钮
const handleDownLoadFile = () => {
  if (props.tableDetailData.length > 0) {
    console.log('下载模版按钮')
    // downFileTemplate()
    window.location.href = '/api/report/download/template/excel'
  } else {
    ElMessage({
      dangerouslyUseHTMLString: true,
      type: 'error',
      message:
        "<p><strong style='color:tomato'>空数据</strong> 无法下载模版</p>",
    })
    console.log('暂无数据')
  }
}

//取消方法
const handleQuitBtn = () => {
  console.log('点击了取消')
  isEditPropertyShow.value = ''
  isShowBottomBtn.value = false
}
//保存方法
const handleSaveBtn = () => {
  console.log('点击了提交')
  isEditPropertyShow.value = ''
  isShowBottomBtn.value = false
  // 提交数据 tableDetailData 到接口
}
</script>

<style scoped lang="less">
.main-detail {
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
  display: flex;
  flex-direction: column;
  .top-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      font-size: 18px;
      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
      font-weight: bold;
      color: #666666;
    }
    .download-btn {
      width: 138px;
      height: 44px;
      border-radius: 6px;
      background: #0057ff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      user-select: none;
      .btn-img {
        width: 24px;
        height: 24px;
        margin-right: 10px;
      }
      font-size: 16px;
      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
      font-weight: bold;
      color: #ffffff;
    }
    .download-btn-disable {
      opacity: 0.3;
      cursor: not-allowed;
    }
  }
  .detail-table-no-data {
    margin-top: 30px;
    height: calc(100% - 104px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      width: 600px;
      height: 600px;
    }
    span {
      font-size: 30px;
      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
      font-weight: 500;
      color: #666666;
    }
  }
  .detail-table {
    margin-top: 30px;
    display: flex;
    height: calc(100% - 104px);
    justify-content: space-between;
    flex-direction: column;
    .detail-table-box {
      height: 690px;
    }
    &:deep(.el-table .cell) {
      padding: 0 0px 0 30px;
    }
    &:deep(.el-table__header-wrapper .el-table__header .el-table__cell) {
      background: #f4f8ff;
      font-size: 14px;
      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
      font-weight: 500;
      color: #666666;
      //   border-right: 1px solid #f4f8ff;
    }
    &:deep(.el-table__body .el-table__cell) {
      border-right: 1px solid #f6f6f6;
      font-size: 14px;
      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
      font-weight: 500;
      color: #333333;
    }
    &:deep(.el-table__body .el-table__cell:first-child) {
      border-left: 1px solid #f6f6f6;
    }
    &:deep(.detail-table-box
        .el-table--enable-row-hover
        .el-table__body
        tr:hover
        > td.el-table__cell) {
      background-color: transparent;
    }
    &:deep(.el-table__body .el-table__row:hover .el-table__cell) {
      border-right: 1px solid #f6f6f6;
    }
    &:deep(.el-table__body .el-table__row:hover .el-table__cell:first-child) {
      border-left: 1px solid #f6f6f6;
    }

    &:deep(.el-input) {
      line-height: 23px;
    }
    // input 边框 和 hover状态下
    &:deep(.el-input__inner) {
      box-shadow: none;
      padding-left: 0 !important;
      height: 23px;
      line-height: 23px;
      font-size: 14px;
      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
      font-weight: 500;
      color: #333333;
    }
    &:deep(.el-input__inner:hover) {
      box-shadow: none;
    }
  }
  .handle-btn-class {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;

    .btn-img {
      width: 24px;
      height: 24px;
      margin-right: 10px;
    }
    .quit-btn,
    .save-btn {
      width: 106px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 6px;
      font-size: 16px;
      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
      font-weight: 500;
      cursor: pointer;
      user-select: none;
    }
    .quit-btn {
      background: #f2f3f5;
      color: #666666;
      margin-right: 60px;
    }
    .save-btn {
      background: #0057ff;
      color: #ffffff;
    }
  }
}
</style>
